<template>
  <list-template>
    <template slot="header">
      <el-form class="search-form" :model="listQuery" ref="searchForm"  inline>
         <el-tabs
        v-model="listQuery.categoryId"
        @tab-click="categoryChange"
      >
       <el-tab-pane
          label="全部"
        ></el-tab-pane>
        <el-tab-pane
          v-for="(item, key) in categorys"
          :key="key"
          :label="item.name"
          :name="item.id + ''"
        ></el-tab-pane>
      </el-tabs>
        <el-form-item prop="keyword">
          <el-input
            placeholder="关键字"
            v-model="listQuery.keyword"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="goodsType">
          <el-select
            v-model="listQuery.goodsType"
            value-key="name"
            clearable
            placeholder="商品类型"
          >
            <el-option
              v-for="(item, key) in $CONST.GOODS_TYPE"
              :key="key"
              :label="item.title"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            type="primary"
            v-waves
            icon="el-icon-search"
            @click="changeCondition"
          >搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" v-waves icon="el-icon-delete" @click="clearSearch">清除</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="main">
      <div v-if="rows.length > 0" style="overflow:hidden;">
        <el-row :gutter="40">
          <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="4" class="card" v-for="goods in rows" :key="goods.id">
            <el-card :body-style="{ padding: '0px' }" shadow="hover" style="cursor:pointer;">
              <div class="square">
                <div class="square-content">
                  <el-image class="image" :src="goods.thumb" fit="cover"  @click="showDetail(goods)"></el-image>
                  <!-- <video v-if="goods.video" :poster="goods.thumb" controls class="video" :src="goods.video"></video> -->
                </div>
              </div>
              <div style="padding: 14px;" @click="showDetail(goods)">
                <div class="clearfix" v-if="(!goods.prices || goods.prices.length === 0)  && goods.formatPrice">
                  <span class="price">¥{{ goods.formatPrice }}</span>
                </div>
                <div class="clearfix" v-if="goods.prices && goods.prices.length > 0">
                  <span class="price">¥{{ goods.prices[0].formatPrice }}</span>
                  <span class="orgin-price">¥{{ goods.formatPrice }}</span>
                </div>
                <div class="clearfix" style="margin-top:12px;overflow: hidden;height: 20px;line-height: 20px;display:inline-block;">
                  <span>{{ goods.name }}</span>
                </div>
                <div class="bottom clearfix">
                  <el-tag size="medium" type="danger" effect="dark">
                    {{ goods.goodsType.desc }}
                  </el-tag>
                  <span class="sales-volume">已售出 {{ goods.salesVolume }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div v-if="rows === null || rows.length === 0" class="empty-notice">
        暂无符合条件商品
      </div>
    </template>
    <template slot="footer">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page.sync="pageInfo.pageIndex"
        :page-size.sync="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper "
        :total="total"
      ></el-pagination>
    </template>
  </list-template>
</template>

<script>
import goodsApi from '@/api/goods'
import goodsCategoryApi from '@/api/goodsCategory'
import waves from '@/directive/waves' // 水波纹指令
import ListTemplate from '@/components/templates/listTemplate'

export default {
  directives: {
    waves
  },
  components: {
    ListTemplate
  },
  data () {
    return {
      categorys: [],
      selectLoading: false,
      rows: [],
      total: 0,
      dateArray: [],
      listQuery: {
        keyword: null
      },
      pageInfo: {
        pageIndex: 1,
        pageSize: 20
      }
    }
  },
  methods: {
    getCategorys () {
      goodsCategoryApi.getAll().then(res => {
        this.categorys = res.data
      })
    },
    categoryChange () {
      this.changeCondition()
    },
    /**
     * 加载数据
     */
    getList () {
      goodsApi
        .getPaged({ condition: this.listQuery, pageInfo: this.pageInfo })
        .then((response) => {
          console.log('res', response)

          this.rows = response.data.content
          this.total = response.data.totalElements
        })
    },
    /**
     * 搜索条件变更处理
     */
    changeCondition () {
      this.pageInfo.pageIndex = 0
      this.getList()
    },
    /**
     * 查看详情点击处理
     * @param {*} row 参数
     */
    showDetail (row) {
      this.$router.pushTo(this.$router.routesConfig.goodsInfo, row.id + '')
    },
    /**
     * 清除查询条件
     */
    clearSearch () {
      this.listQuery = {}
      this.pageInfo.pageIndex = 0
      this.getList()
    },
    /**
     * 分页大小调整
     *
     * @param size 分页大小
     */
    handlePageSizeChange (size) {
      this.pageInfo.pageSize = size
      this.pageInfo.pageIndex = 1
      this.getList()
    },
    /**
     * 页码变化
     *
     * @param currentPage 页码
     */
    handlePageCurrentChange (currentPage) {
      this.pageInfo.pageIndex = currentPage
      this.getList()
    }
  },
  beforeDestroy () {
    this.$EventBus.$off('searchGoods')
  },
  created () {
    if (this.$route.params) {
      this.listQuery.keyword = this.$route.params.keyword
    }
  },
  mounted () {
    this.$EventBus.$on('searchGoods', keyword => {
      this.listQuery.keyword = keyword
      this.getList()
    })
    this.getCategorys()
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
  .condition {
    margin-right: 10px;
  }

  .sales-volume {
    font-size: 14px;
    color: #999;
    float: right;
    line-height: 24px;
  }

  .price {
    font-weight: bold;
    font-size: 20px;
    color: #e4393c;
  }

  .orgin-price {
    font-size: 14px;
    color: #999;
    text-decoration:line-through;
    margin-left: 15px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 100%;
    display: block;
  }

  .video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }

  .card {
    margin-bottom: 20px;
  }

  .empty-notice {
    font-size: 20px;
    text-align: center;
    padding-top: 40px;
  }

  .square {
    padding-bottom:100%;
    height: 0;
    width: 100%;
    position: relative;
  }

  .square-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
  }
</style>
